<template>
	<view>
		<view class="bgPhone c-flex-start-start">
			<view class="navSearch">
				<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
			</view>
			<text>Welcome!</text>
			<text>欢迎来到美业</text>
		</view>
		<!-- tabs -->
		<!-- <view class="tabsBox">

		</view> -->
		<!-- 输入框验证码 -->
		<view :class="tabsData.current==0?'inputBox inputBgLeft':'inputBox inputBgRight'">
			<u-tabs :list="tabsData.list1" @click="onClickTab" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
				fontSize:'40rpx',
				width:'290rpx',
				textAlign:'center',
				height:'86rpx',
				bottom:'10rpx'
			}" lineHeight="4" :inactiveStyle="{
			width:'290rpx',
			textAlign:'center',
			fontSize:'32rpx',
			height:'80rpx'
			}" :current="tabsData.current" lineWidth="48rpx" lineColor="#CB645E"></u-tabs>
			<view class="inputCon" v-if="tabsData.current==0">
				<u--input placeholder="请输入手机号" type="text" border="none" clearable v-model="formData.mobile"
					:customStyle="{
					height:'96rpx'
				}"></u--input>
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入验证码" type="text" border="none" v-model="formData.code" :customStyle="{
					height:'96rpx'
				}">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入验证码" type="text" border="none" v-model="formData.code" :customStyle="{
					height:'96rpx'
				}">
						<!-- #endif -->
						<template #suffix>
							<view class="countDown" v-if="formData.dis">
								{{ formData.count }}秒后可重新获取
							</view>
							<view class="countDown" v-if="!formData.dis" @click="sendCode">
								{{ formData.codeText }}
							</view>
						</template>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="inputCon" v-if="tabsData.current==1">
				<u--input placeholder="请输入手机号" type="text" border="none" clearable v-model="formData.mobile"
					:customStyle="{
					height:'96rpx'
				}"></u--input>
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入密码" :type="formData.passwrdType" border="none" v-model="formData.password"
					:customStyle="{
					height:'96rpx'
				}">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="请输入密码" :type="formData.passwrdType" border="none" v-model="formData.password"
						:customStyle="{
					height:'96rpx'
				}">
						<!-- #endif -->
						<template #suffix>
							<view class="" @click="changeInput">
								<u-icon name="eye-fill"></u-icon>
							</view>
						</template>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="submitBox" @click="subLogin">
				登录
			</view>
			<view class="registerNew" @click="linkRegister">
				新用户注册
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 输入框密码 -->
		<!-- <view :class="tabsData.current==1?'inputBox inputBgRight':'inputBox'" v-if="tabsData.current==1">
			<u-tabs :list="tabsData.list1" @click="onClickTab" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
				fontSize:'40rpx',
				width:'290rpx',
				textAlign:'center',
				height:'66rpx'
			}" :inactiveStyle="{
			width:'290rpx',
			textAlign:'center',
			fontSize:'32rpx',
			height:'60rpx'
			}" lineHeight="4" lineWidth="48rpx" current="1" lineColor="#CB645E"></u-tabs>

			<view class="qline"></view>
			<view class="forgetClass" @click="linkForget">
				忘记密码
			</view>

			<view class="submitBox" @click="subLogin">
				登录
			</view>
			<view class="registerNew" @click="linkRegister">
				新用户注册
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->

		<!-- 按钮 -->
		<!-- #ifdef APP-PLUS -->
		<view class="fixedBtm" @click="wxLogin">
			<text>其他登录方式</text>
			<image src="../../../static/icon/wechat.png" mode=""></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		validatePhoneNumber,
	} from '@/utlis/common.js'

	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	let router = useRouter()
	import {
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	let tabsData = reactive({
		list1: [{
			name: '手机号码登录',
		}, {
			name: '密码登录',
		}],
		current: 0
	})
	onLoad((option) => {
		console.log(option);
	})
	let formData = reactive({
		mobile: '',
		password: '',
		code: '',
		passwrdType: 'password',
		dis: false,
		count: 0,
		codeText: '获取验证码'
	})
	const onClickTab = (e) => {
		tabsData.current = e.index
	}

	const wxLogin = () => {
		let platform = uni.getSystemInfoSync().platform;
		console.log(platform);
		if (platform == 'ios') return
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true,
			success: function (event) {
				const { code } = event
				console.log(event);
				proxy.$req('GET', proxy.$api.wxGetToken, {
					code: event.code,
					//0个人1商家2供应商
					memberType: uni.getStorageSync('roleFlag'),
					//bindType      0登录注册1绑定
					bindType: 0,
				}).then((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					console.log(res, 'weix');
					if (res.success && res.result.flag == 1) {
						userStoreInfo.doLogin(res.result.member, uni.getStorageSync('roleFlag'))
						// wxLogin2(res.result.token, res.result.openid)
						if (uni.getStorageSync('roleFlag') == 1 && res.result.member.shoppingStore.isReal == 0) {
							router.push({
								name: 'authRole',
								params: {}
							})
							//&& res.result.supplier == 0
						} else if (uni.getStorageSync('roleFlag') == 2 && res.result.member.supplier.isReal == 0) {
							router.push({
								name: 'authRole',
								params: {}
							})
						} else {
							router.pushTab({
								name: 'index',
								params: {}
							})
						}
					} else if (res.success && res.result.flag == 0) {
						//去注册
						linkRegister(res.result.wxInfo, res.result.flag)
					}
				})
			},
			fail: function (err) {
				console.log(err);
				// 登录授权失败  
				// err.code是错误码
			}
		})
	}
	const wxLogin2 = (token, openid) => {
		proxy.$req('GET', proxy.$api.wxLogin, {
			accessToken: token,
			openid,
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				//存用户信息
				userStoreInfo.doLogin(res.result, uni.getStorageSync('roleFlag'))
				//是否认证&& res.result.shoppingStore == 0
				if (uni.getStorageSync('roleFlag') == 1 && res.result.shoppingStore.isReal == 0) {
					router.push({
						name: 'authRole',
						params: {}
					})
					//&& res.result.supplier == 0
				} else if (uni.getStorageSync('roleFlag') == 2 && res.result.supplier.isReal == 0) {
					router.push({
						name: 'authRole',
						params: {}
					})
				} else {
					router.pushTab({
						name: 'index',
						params: {}
					})
				}
			}
		})
	}
	const subLogin = () => {
		// router.push({
		// 	name: 'authRole',
		// 	params: {}
		// })
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		let isErr = false
		if (tabsData.current == 0) {
			// console.log(1);
			if (formData.code.length < 4) {
				uni.showToast({
					title: '验证码不合法',
					icon: 'none'
				})
				isErr = true
			}
		} else {
			// console.log(2);
			if (formData.password.length < 6) {
				uni.showToast({
					title: '密码不合法',
					icon: 'none'
				})
				isErr = true
			}
		}
		if (isErr) {
			return
		}
		//登录
		if (tabsData.current == 0) {
			//验证码登录
			proxy.$req('POST', proxy.$api.login, {
				code: formData.code,
				phone: formData.mobile,
				memberType: uni.getStorageSync('roleFlag'),
			}, '').then((res) => {
				console.log(res);
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (res.success) {
					//存用户信息
					userStoreInfo.doLogin(res.result, uni.getStorageSync('roleFlag'))

					//是否认证&& res.result.shoppingStore == 0
					if (uni.getStorageSync('roleFlag') == 1 && res.result.shoppingStore.isReal == 0) {
						router.push({
							name: 'authRole',
							params: {}
						})
						//&& res.result.supplier == 0
					} else if (uni.getStorageSync('roleFlag') == 2 && res.result.supplier.isReal == 0) {
						router.push({
							name: 'authRole',
							params: {}
						})
					} else {
						router.pushTab({
							name: 'index',
							params: {}
						})
					}
				}
			})
		} else {
			//密码登录
			proxy.$req('POST', proxy.$api.login, {
				password: formData.password,
				phone: formData.mobile,
				memberType: uni.getStorageSync('roleFlag'),
			}, '').then((res) => {
				console.log(res);
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (res.success) {
					//存用户信息
					userStoreInfo.doLogin(res.result, uni.getStorageSync('roleFlag'))
					const { id } = res.result;

					//是否认证&& res.result.shoppingStore == 0
					if (uni.getStorageSync('roleFlag') == 1 && res.result.shoppingStore.isReal == 0) {
						router.push({
							name: 'authRole',
							params: {}
						})
						//&& res.result.supplier == 0
					} else if (uni.getStorageSync('roleFlag') == 2 && res.result.supplier.isReal == 0) {
						router.push({
							name: 'authRole',
							params: {}
						})
					} else {
						router.pushTab({
							name: 'index',
							params: {}
						})
					}
				}
			})
		}
	}
	const sendCode = (e) => {
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		proxy.$req('POST', proxy.$api.getCode, {
			mobile: formData.mobile,
			smsmode: '1'
		}, '').then((res) => {
			// console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				getCode()
			}
		})
	}
	const linkRegister = (e = {}, f = 8) => {
		uni.navigateTo({
			url: '/pages/account/register/register?wxInfo=' + JSON.stringify(e) + '&flag=' + f,
		})
	}
	const linkForget = () => {
		uni.navigateTo({
			url: '/pages/account/forget/forget'
		})
	}
	const changeInput = (e) => {
		if (formData.passwrdType == 'text') {
			formData.passwrdType = 'password'
		} else {
			formData.passwrdType = 'text'
		}
	}
	const getCode = () => {
		// 开始计时，结束后重新发送
		let TIME_COUNT = 120;
		let timer = null;
		let show = true;
		if (!timer) {
			formData.count = TIME_COUNT;
			show = false;
			formData.dis = true;
			timer = setInterval(() => {
				if (formData.count > 0 && formData.count <= TIME_COUNT) {
					formData.count--;
				} else {
					formData.dis = false;
					formData.codeText = '重新获取'
					show = true;
					clearInterval(timer);
					timer = null;
				}
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.bgPhone {
		background-image: url('../../../static/images/loginBg.png');
		background-size: 100% 100%;
		width: calc(100% - 68rpx);
		height: 456rpx;
		padding: 216rpx 64rpx 0;

		text:nth-child(2) {
			font-size: 60rpx;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 10rpx;
		}

		text:nth-child(3) {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

	}

	.inputBgLeft {
		background-image: url('../../static/images/whiteLeft.png');
		background-size: 100% 100%;
	}

	.inputBgRight {
		background-image: url('../../static/images/whiteRight.png');
		background-size: 100% 100%;
	}

	.tabsBox {
		margin: 100rpx auto 50rpx;
		padding-left: 30rpx;
	}


	:deep(.u-tabs__wrapper__nav__line) {
		bottom: 20rpx !important;
	}

	.inputBox {
		width: 686rpx;
		height: 730rpx;
		margin: -200rpx auto 0;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.inputCon {
			// margin-top: 70rpx;
			// height: 160rpx;
			padding: 0 32rpx;
		}

		.forgetClass {
			font-size: 26rpx;
			color: #c4c9cf;
			margin-top: 30rpx;
		}

	}

	.countDown {
		font-size: 24rpx;
		color: #c4c9cf;
	}

	.submitBox {
		width: 622rpx;
		height: 96rpx;
		background: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: 500;
		margin: 0rpx auto 30rpx;
	}

	.registerNew {
		font-size: 28rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fixedBtm {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		position: fixed;
		bottom: 80rpx;
		color: rgba(0, 0, 0, 0.45);

		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50rpx;
			margin-top: 32rpx;
		}
	}
</style>